"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  MessageSquare,
  Users,
  Calendar,
  MapPin,
  Heart,
  Share2,
  Plus,
  Search,
  Filter,
  Coffee,
  Lightbulb,
  UserCheck,
} from "lucide-react"
import { useState } from "react"

interface CommunityModalProps {
  onClose: () => void
  user: any
}

export function CommunityModal({ onClose, user }: CommunityModalProps) {
  const [activeTab, setActiveTab] = useState("posts")
  const [newPost, setNewPost] = useState("")
  const [searchQuery, setSearchQuery] = useState("")

  // 模拟社区数据
  const communityPosts = [
    {
      id: 1,
      author: {
        name: "张创业",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "连续创业者",
        verified: true,
      },
      content:
        "刚完成A轮融资3000万，分享一下我的融资经验：1. BP要简洁有力 2. 数据要真实可信 3. 团队背景很重要 4. 商业模式要清晰。有问题可以私信我！",
      tags: ["融资经验", "A轮", "创业分享"],
      time: "2小时前",
      likes: 156,
      comments: 23,
      shares: 12,
      liked: false,
    },
    {
      id: 2,
      author: {
        name: "李小美",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "电商创业者",
        verified: false,
      },
      content:
        "做电商一年了，从0到月销100万的心得：选品很重要，供应链是核心，客服要用心。最重要的是要坚持，前期真的很难熬。",
      tags: ["电商", "选品", "供应链"],
      time: "4小时前",
      likes: 89,
      comments: 15,
      shares: 8,
      liked: true,
    },
    {
      id: 3,
      author: {
        name: "王技术",
        avatar: "/placeholder.svg?height=40&width=40",
        title: "技术创始人",
        verified: true,
      },
      content: "技术创业者的痛点：1. 不懂商业 2. 不会营销 3. 不善沟通。建议找个商业合伙人，技术+商业的组合成功率更高。",
      tags: ["技术创业", "合伙人", "商业模式"],
      time: "6小时前",
      likes: 234,
      comments: 45,
      shares: 18,
      liked: false,
    },
  ]

  const events = [
    {
      id: 1,
      title: "创业者线下聚会 - 上海站",
      date: "2024年1月20日",
      time: "14:00-18:00",
      location: "上海市浦东新区",
      attendees: 45,
      maxAttendees: 50,
      type: "线下聚会",
    },
    {
      id: 2,
      title: "AI创业专题分享会",
      date: "2024年1月25日",
      time: "19:00-21:00",
      location: "线上直播",
      attendees: 234,
      maxAttendees: 500,
      type: "在线分享",
    },
    {
      id: 3,
      title: "投资人见面会",
      date: "2024年2月1日",
      time: "15:00-17:00",
      location: "北京市朝阳区",
      attendees: 28,
      maxAttendees: 30,
      type: "投资对接",
    },
  ]

  const groups = [
    {
      id: 1,
      name: "AI创业交流群",
      members: 1234,
      description: "专注AI领域的创业者交流",
      category: "技术",
      active: true,
    },
    {
      id: 2,
      name: "电商创业者联盟",
      members: 2345,
      description: "电商创业经验分享与资源对接",
      category: "电商",
      active: false,
    },
    {
      id: 3,
      name: "融资经验分享",
      members: 567,
      description: "融资路演、投资人对接",
      category: "融资",
      active: true,
    },
  ]

  const handleLike = (postId) => {
    // 模拟点赞功能
    console.log("点赞帖子:", postId)
  }

  const handleJoinEvent = (eventId) => {
    // 模拟参加活动
    console.log("参加活动:", eventId)
  }

  const handleJoinGroup = (groupId) => {
    // 模拟加入群组
    console.log("加入群组:", groupId)
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <Users className="w-5 h-5" />
            <span>创业者社区</span>
            <Badge className="bg-green-100 text-green-700">{user ? "已加入" : "未登录"}</Badge>
          </DialogTitle>
        </DialogHeader>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="posts">动态广场</TabsTrigger>
            <TabsTrigger value="events">活动</TabsTrigger>
            <TabsTrigger value="groups">群组</TabsTrigger>
            <TabsTrigger value="resources">资源</TabsTrigger>
          </TabsList>

          <TabsContent value="posts" className="space-y-6 mt-6">
            {/* 发布新动态 */}
            {user && (
              <Card>
                <CardContent className="p-4">
                  <div className="flex space-x-3">
                    <Avatar>
                      <AvatarImage src={user.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{user.name?.[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <Textarea
                        placeholder="分享你的创业经验或问题..."
                        value={newPost}
                        onChange={(e) => setNewPost(e.target.value)}
                        className="min-h-[100px] mb-3"
                      />
                      <div className="flex justify-between items-center">
                        <div className="flex space-x-2">
                          <Button variant="outline" size="sm">
                            <Lightbulb className="w-4 h-4 mr-2" />
                            经验分享
                          </Button>
                          <Button variant="outline" size="sm">
                            <MessageSquare className="w-4 h-4 mr-2" />
                            求助
                          </Button>
                        </div>
                        <Button size="sm" disabled={!newPost.trim()}>
                          发布
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* 搜索和筛选 */}
            <div className="flex space-x-3">
              <div className="relative flex-1">
                <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <Input
                  placeholder="搜索社区内容..."
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Button variant="outline">
                <Filter className="w-4 h-4 mr-2" />
                筛选
              </Button>
            </div>

            {/* 动态列表 */}
            <div className="space-y-4">
              {communityPosts.map((post) => (
                <Card key={post.id}>
                  <CardContent className="p-6">
                    <div className="flex space-x-3">
                      <Avatar>
                        <AvatarImage src={post.author.avatar || "/placeholder.svg"} />
                        <AvatarFallback>{post.author.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2 mb-2">
                          <span className="font-medium text-slate-900">{post.author.name}</span>
                          {post.author.verified && (
                            <Badge variant="outline" className="text-xs">
                              认证
                            </Badge>
                          )}
                          <span className="text-sm text-slate-500">{post.author.title}</span>
                          <span className="text-sm text-slate-400">·</span>
                          <span className="text-sm text-slate-400">{post.time}</span>
                        </div>
                        <p className="text-slate-700 mb-3 leading-relaxed">{post.content}</p>
                        <div className="flex flex-wrap gap-2 mb-3">
                          {post.tags.map((tag, index) => (
                            <Badge key={index} variant="outline" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                        <div className="flex items-center space-x-6 text-sm text-slate-500">
                          <button
                            className={`flex items-center space-x-1 hover:text-red-500 ${
                              post.liked ? "text-red-500" : ""
                            }`}
                            onClick={() => handleLike(post.id)}
                          >
                            <Heart className={`w-4 h-4 ${post.liked ? "fill-current" : ""}`} />
                            <span>{post.likes}</span>
                          </button>
                          <button className="flex items-center space-x-1 hover:text-blue-500">
                            <MessageSquare className="w-4 h-4" />
                            <span>{post.comments}</span>
                          </button>
                          <button className="flex items-center space-x-1 hover:text-green-500">
                            <Share2 className="w-4 h-4" />
                            <span>{post.shares}</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="events" className="space-y-6 mt-6">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-semibold">近期活动</h3>
              <Button>
                <Plus className="w-4 h-4 mr-2" />
                发布活动
              </Button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {events.map((event) => (
                <Card key={event.id}>
                  <CardContent className="p-6">
                    <div className="flex justify-between items-start mb-4">
                      <div className="flex-1">
                        <h4 className="font-semibold text-slate-900 mb-2">{event.title}</h4>
                        <div className="space-y-1 text-sm text-slate-600">
                          <div className="flex items-center space-x-2">
                            <Calendar className="w-4 h-4" />
                            <span>
                              {event.date} {event.time}
                            </span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <MapPin className="w-4 h-4" />
                            <span>{event.location}</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Users className="w-4 h-4" />
                            <span>
                              {event.attendees}/{event.maxAttendees} 人参加
                            </span>
                          </div>
                        </div>
                      </div>
                      <Badge variant="outline">{event.type}</Badge>
                    </div>
                    <div className="flex justify-between items-center">
                      <div className="w-full bg-slate-200 rounded-full h-2">
                        <div
                          className="bg-blue-600 h-2 rounded-full"
                          style={{ width: `${(event.attendees / event.maxAttendees) * 100}%` }}
                        ></div>
                      </div>
                      <Button
                        size="sm"
                        className="ml-4"
                        onClick={() => handleJoinEvent(event.id)}
                        disabled={event.attendees >= event.maxAttendees}
                      >
                        {event.attendees >= event.maxAttendees ? "已满" : "参加"}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="groups" className="space-y-6 mt-6">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-semibold">创业群组</h3>
              <Button>
                <Plus className="w-4 h-4 mr-2" />
                创建群组
              </Button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {groups.map((group) => (
                <Card key={group.id}>
                  <CardContent className="p-6">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex-1">
                        <h4 className="font-semibold text-slate-900 mb-1">{group.name}</h4>
                        <p className="text-sm text-slate-600 mb-2">{group.description}</p>
                        <div className="flex items-center space-x-4 text-xs text-slate-500">
                          <span>{group.members} 成员</span>
                          <Badge variant="outline" className="text-xs">
                            {group.category}
                          </Badge>
                        </div>
                      </div>
                      {group.active && <div className="w-2 h-2 bg-green-500 rounded-full"></div>}
                    </div>
                    <Button size="sm" className="w-full" onClick={() => handleJoinGroup(group.id)}>
                      加入群组
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="resources" className="space-y-6 mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Coffee className="w-5 h-5 text-brown-600" />
                    <span>创业资源</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">投资人名录</h4>
                    <p className="text-sm text-slate-600">1000+ 投资人联系方式</p>
                  </div>
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">法务模板</h4>
                    <p className="text-sm text-slate-600">合同模板、股权协议等</p>
                  </div>
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">财务工具</h4>
                    <p className="text-sm text-slate-600">财务模型、预算表格</p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <UserCheck className="w-5 h-5 text-blue-600" />
                    <span>合作对接</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">寻找合伙人</h4>
                    <p className="text-sm text-slate-600">技术、商务、运营合伙人</p>
                  </div>
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">供应商对接</h4>
                    <p className="text-sm text-slate-600">优质供应商推荐</p>
                  </div>
                  <div className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100">
                    <h4 className="font-medium text-slate-900">渠道合作</h4>
                    <p className="text-sm text-slate-600">销售渠道、推广渠道</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

        <div className="flex justify-end mt-6">
          <Button onClick={onClose}>关闭</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
